"use client";

import React, {useState} from "react";
import {DataTable} from "mantine-datatable";
import {EdgeSimulationProps} from "./data-interface";
import {renderColumnGroup} from "./utils/renderColumnGroup";
import {mockData} from "./data-mock";
import {renderRowExpansion} from "./utils/renderRowExpansion";

export const IpdTableSimu = () => {
  // 为行数据指定数据类型
  const [selectedRecords, setSelectedRecords] = useState<EdgeSimulationProps[]>([]);

  // 当选中行时，打印选中的行数据
  const handleSelectedRecordsChange = (newSelectedRecords: EdgeSimulationProps[]) => {
    setSelectedRecords(newSelectedRecords);
    console.log("选中的行数据:", newSelectedRecords); // 打印选中的行
  };

  // [来自Chat-GPT]把 mockData 转换为符合 Record<string, unknown> 的结构
  const data = mockData.map((item) => ({
    ...item,
    key: item.edge.id,
  }));

  return (
    <DataTable
      withTableBorder // 表格外边框
      withColumnBorders // 列边框（行边框是默认的，因此无需配置）
      striped // 斑马纹
      highlightOnHover // 悬停效果
      // 批量设置表格内容：永不换行（包括aaa-bbb连字符情况下也不换行）
      style={{whiteSpace: "nowrap"}}
      // fetching={fetching} // 这两行和表格的加载状态有关。后台不光是改前端数据，而且还有附带的系列批量计算，耗时在所难免。
      // loaderType="oval" // 因此必须增加loading状态，增强用户体验
      records={data}
      groups={renderColumnGroup}
      minHeight={100} // 实际应该改成300
      noRecordsText="无数据"
      selectedRecords={selectedRecords} // 当前选取项
      onSelectedRecordsChange={setSelectedRecords} // 选取项变化时刷新内容
      // 和本项目需求的idRecordSelectable属性的关联，
      // 若idRecordSelectable=false,无论单行选择还是多行选择，该行都不被选中
      // 除非将其置为true
      pinFirstColumn // 固定第一列
      pinLastColumn // 固定最后一列
      // idAccessor配置非常重要，mantine-datatable默认每一条record有id属性
      // 如果不是这种标准结构，需要显式指定record的唯一id
      idAccessor="edge.id"
      // 行展开配置，开发模式下卡顿是正常现象，打包后卡顿问题可消失
      rowExpansion={{
        content: renderRowExpansion,
      }}
    />
  );
};
